// webpack.config.js
var webpack = require('webpack');
var path = require('path');
//因为我们是vue.js的应用，把各个组件当做一个页面.vue后缀，所以引入这个可以编译這些文件
//var vue = require("vue-loader");
//这个是构建页面资源的插件 webpack的插件,不支持热更新，开发环境不用
//var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
	//页面入口文件配置
	entry: [
		//'webpack-dev-server/client?http://127.0.0.1:3000/',//资源服务器地址
		//'webpack/hot/dev-server',
		'./index.js'
    ],
	//入口文件输出配置
	output: {
		path: path.join(__dirname, 'out'),  //打包输出的路径
		filename: 'bundle.js',			  //打包后的名字
		//publicPath: "./out/"
		publicPath:"http://127.0.0.1:8999/out/" //本机调试的时候用
    },
    module: {
		//加载器配置 "-loader"其实是可以省略不写的，多个loader之间用“!”连接起来
		loaders: [
			//.vue 文件使用 vue-loader
			{test: /\.vue$/,use: 'vue-loader'},
			//.js 文件使用 jsx-loader 来编译处理
			//{ test: /\.js$/, loader: 'jsx-loader?harmony' },
            /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
            {test: /\.js$/,loader: 'babel-loader',
            /* 排除模块安装目录的文件 */
            	exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            },
			//.css 文件使用 style-loader 和 css-loader 来处理
			//请注意loader里的写法，有一些低版本的例子中是过时的写法 ExtractTextPlugin不支持热更新，开发环境不用
			{ test: /\.css$/, loader: 'style-loader!css-loader' },
			//{test: /\.css$/,loader: ExtractTextPlugin.extract({fallback:"style-loader", use:["css-loader"]}),exclude: /node_modules/},
			// 使用less-loader、autoprefixer-loader、css-loader和style-loade 加载 .less 结尾的文件
            {test: /\.scss$/,use:['style-loader','css-loader','autoprefixer-loader','sass-loader'], exclude: /node_modules/},// 将样式抽取出来为独立的文件    
			// 加载图片
            {test: /\.(png|jpg|gif)$/,loader: 'url-loader',
                options: {
                    // 把较小的图片转换成base64的字符串内嵌在生成的js文件里
                    limit: 10000,
                    // 路径和生产环境下的不同，要与修改后的publickPath相结合
                    name: 'img/[name].[ext]?[hash:7]'
                }
            },
			//加载图标
			{test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader: 'file-loader',
                options: {                   
                    limit: 10000,
                    // 路径和生产环境下的不同，要与修改后的publickPath相结合
                    name:'fonts/[name].[ext]?[hash:7]',
                    prefix:'font'
                }
            }
		]
	},
	plugins: [
		//这样会定义，所有js文件中通过require引入的css都会被打包成相应文件名字的css
		//new ExtractTextPlugin("[name].css"),
	    new webpack.ProvidePlugin({
			$: "jquery",
		    jQuery: "jquery",
		    "window.jQuery": "jquery",
		})
		//webpack 压缩插件
		/**
		new webpack.optimize.UglifyJsPlugin({
	      compress: {
	        warnings: false
	      }
	    }),
	    **/
	  ],
	//其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        modules: [path.join(__dirname,"node_modules")],//绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['.js', '.json', '.scss','.vue'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
        	'vue$': 'vue/dist/vue.min'
        }
    },
	devServer: {
		historyApiFallback: true,
		hot: true,
		inline: true
	}
};
